<template>
  <div class="bind-container">
    <el-dialog :visible.sync="visible">
      <div class="propertyregist">
        <div class="panelWrap bind-content">
          <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
            <div>电梯信息绑定</div>
            <i class="el-icon-close" @click="handleCloseDialog" />
          </div>
          <div class="bind-main flex flexdc">
            <div class="con">
              <div class="con-row flex flexac pl">
                <div class="flex flexac">
                  <div class="inputLable inputLable1 flex flexac">
                    <span class="name texttr"><span class="mustval">*</span>场所名称：</span>
                    <el-input v-model="usePlaceName" readonly class="input" placeholder="请选择场所名称" />
                    <el-button type="warning" class="sele-btn plBtn co-btn el-icon-circle-check" @click="handleUsePlace">选择场所</el-button>
                  </div>
                </div>
              </div>

              <div class="con-row flex flexac pl ">
                <div class="inputLable inputLable2 flex flexac ">
                  <span class="name texttr"><span class="mustval">*</span>安全管理员姓名：</span>
                  <el-input v-model="securityPerson" class="input" placeholder="请输入安全管理员姓名" />
                </div>
              </div>
              <div class="con-row flex flexac pl ">
                <div class="inputLable inputLable2 flex flexac ">
                  <span class="name texttr"><span class="mustval">*</span>安全管理员手机：</span>
                  <el-input v-model="securityPersonPhone" class="input" type="number" placeholder="请输入安全管理员手机" />
                </div>
              </div>
              <div class="con-row flex flexac pl ">
                <div class="inputLable inputLable2 flex flexac ">
                  <span class="name texttr"><span class="mustval">*</span>使用单位：</span>
                  <el-input v-model="useUnitName" readonly class="input" placeholder="请选择单位名称" />
                  <el-button type="warning" class="sele-btn co-btn unBtn el-icon-circle-check" @click="handleUseUnit">选择使用单位</el-button>
                </div>
              </div>

              <div class="con-row flex flexac pl ">
                <div class="inputLable inputLable2 flex flexac ">
                  <span class="name texttr"><span class="mustval">*</span>保养技术支持单位：</span>
                  <el-input v-model="supportUnit" class="input" placeholder="如：上海三菱电梯安装维修分公司" />
                </div>
              </div>

              <div class="con-row flex flexac pl ">
                <div class="inputLable inputLable2 flex flexac ">
                  <span class="name texttr"><span class="mustval">*</span>第一维保人：</span>
                  <el-input v-model="maName" readonly class="input" placeholder="请选择第一维保人" />
                  <el-button type="warning" class="sele-btn co-btn el-icon-circle-check" @click="handleMaint">选择第一维保人</el-button>
                </div>
              </div>

              <div class="con-row flex flexac pl ">
                <div class="inputLable inputLable2 flex flexac ">
                  <span class="name texttr"><span class="mustval">*</span>第一维保人手机号：</span>
                  <el-input v-model="maPhone" readonly class="input" type="number" placeholder="第一维保人手机号" />
                </div>
              </div>
              <div class="con-row flex flexac pl ">
                <div class="inputLable inputLable2 flex flexac ">
                  <span class="name texttr"><span class="mustval">*</span>第二维保人：</span>
                  <el-input v-model="secondName" readonly class="input" placeholder="请选择第二维保人" />
                  <el-button type="warning" class="sele-btn co-btn el-icon-circle-check" @click="handleSecond">选择第二维保人</el-button>
                </div>
              </div>
              <div class="con-row flex flexac pl ">
                <div class="inputLable inputLable2 flex flexac ">
                  <span class="name texttr"><span class="mustval">*</span>第二维保人手机号：</span>
                  <el-input v-model="secondPhone" readonly class="input" type="number" placeholder="第二维保人手机号" />
                </div>
              </div>

            </div>

            <div class="flex footer m-t-35">
              <el-button class="saveBtn m-r-30 el-icon-circle-check" @click="handleSave">绑 定</el-button>

              <el-button class="clsoeBtn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 场所查询 -->
      <FindUsePlace v-model="usePlaceVisible" @update="handleUsePlaceUpdate" />
      <!-- 使用单位查询 -->
      <FindUseUnit v-model="useUnitVisible" @update="handleUseUnitUpdate" />
      <!-- 第一维保人员 -->
      <FindMaintenance v-model="useMaVisible" @update="handleMaiUpdate" />
      <!-- 第二维保人员 -->
      <FindMaSecond v-model="useSecondVisible" @second="handelSecondUpdate" />
    </el-dialog>
  </div>
</template>

<script>

import FindUsePlace from '@/components/findUsePlace'
import FindUseUnit from '@/components/findUseUnit'
import FindMaintenance from '@/components/findMaintenance'
import FindMaSecond from '@/components/findMaSecond'
import { bindElevator } from '@/api/elevator/elevatorRelationship'
import { showNotice } from '@/utils/toolclass'

export default {
  components: {
    FindUsePlace,
    FindUseUnit,
    FindMaintenance,
    FindMaSecond
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      usePlaceVisible: false,
      useUnitVisible: false,
      useMaVisible: false,
      useSecondVisible: false,
      usePlaceName: '',
      useUnitName: '',
      maName: '',
      maPhone: '',
      secondName: '',
      secondPhone: '',
      securityPerson: '测试',
      securityPersonPhone: '13888888888',
      supportUnit: '测试',
      form: {
        id: '', // 电梯ID
        maintenancePerson1Id: '', // 维保人1ID
        maintenancePerson2Id: '', // 维保人2ID
        securityPerson: '', // 安全管理员姓名
        securityPersonPhone: '', // 安全管理员手机
        supportUnit: '', // 保养技术支持单位
        usePlaceId: '', // 电梯使用场所ID
        useUnitId: '' // 使用单位ID
      }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleUsePlace() {
      this.usePlaceVisible = true
    },
    handleUseUnit() {
      this.useUnitVisible = true
    },
    handleMaint() {
      this.useMaVisible = true
    },
    handleSecond() {
      this.useSecondVisible = true
    },
    // 场所查询更新回调
    handleUsePlaceUpdate(row) {
      this.form.usePlaceId = row.id
      this.usePlaceName = row.name
    },
    // 使用单位查询更新回调
    handleUseUnitUpdate(row) {
      this.form.useUnitId = row.id
      this.useUnitName = row.name
    },
    // 第一维保人员更新回调
    handleMaiUpdate(rows) {
      this.form.maintenancePerson1Id = rows.id
      this.maName = rows.name
      this.maPhone = rows.phone
    },
    // 第二维保人员更新回调
    handelSecondUpdate(row) {
      this.form.maintenancePerson2Id = row.id
      this.secondName = row.name
      this.secondPhone = row.phone
    },
    handleSave() {
      if (!(/^\S+$/.test(this.usePlaceName))) {
        showNotice('error', '提示', '请选择使用场所')
        return
      }
      if (!(/^\S+$/.test(this.securityPerson))) {
        showNotice('error', '提示', '请输入安全管理员姓名')
        return
      }
      if (!(/^\S+$/.test(this.securityPersonPhone))) {
        showNotice('error', '提示', '请输入安全管理员手机号')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.securityPersonPhone))) {
        showNotice('error', '提示', '安全管理员手机号码格式错误，请重新输入')
        return
      }
      if (!(/^\S+$/.test(this.useUnitName))) {
        showNotice('error', '提示', '请选择使用单位')
        return
      }
      if (!(/^\S+$/.test(this.supportUnit))) {
        showNotice('error', '提示', '请输入保养技术支持单位')
        return
      }
      if (!(/^\S+$/.test(this.maName))) {
        showNotice('error', '提示', '请选择第一维保人')
        return
      }
      if (!(/^\S+$/.test(this.maPhone))) {
        showNotice('error', '提示', '请输入第一维保人手机号')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.maPhone))) {
        showNotice('error', '提示', '第一维保人手机号码格式错误，请重新输入')
        return
      }
      if (!(/^\S+$/.test(this.secondName))) {
        showNotice('error', '提示', '请选择第二维保人')
        return
      }
      if (!(/^\S+$/.test(this.secondPhone))) {
        showNotice('error', '提示', '请输入第二维保人手机号')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.secondPhone))) {
        showNotice('error', '提示', '第二维保人手机号码格式错误，请重新输入')
        return
      }
      if (this.maPhone === this.secondName) {
        showNotice('error', '提示', '维保人员不能为同一个人')
        return
      }
      const params = {
        // id: this.data.id,
        // registerCode: this.data.registerCode,
        // rescueCode: this.data.rescueCode,
        // usePlaceName: this.usePlaceName,
        // useUnitName: this.useUnitName,
        // maName: this.maName,
        // maPhone: this.maPhone,
        // secondName: this.secondName,
        // secondPhone: this.secondPhone,
        // securityPerson: this.securityPerson,
        // securityPersonPhone: this.securityPerson,
        // supportUnit: this.supportUnit

        id: this.data.id, // 电梯ID
        maintenancePerson1Id: this.form.maintenancePerson1Id, // 维保人1ID
        maintenancePerson2Id: this.form.maintenancePerson2Id, // 维保人2ID
        securityPerson: this.securityPerson, // 安全管理员姓名
        securityPersonPhone: this.securityPersonPhone, // 安全管理员手机
        supportUnit: this.supportUnit, // 保养技术支持单位
        usePlaceId: this.form.usePlaceId, // 电梯使用场所ID
        useUnitId: this.form.useUnitId // 使用单位ID
        // maPhone: this.maPhone,
        // secondPhone: this.secondPhone
      }
      this.handlePropertyAdd(params)
    },
    handleCloseDialog() {
      this.visible = false
      this.$emit('handleCloseDialog')
      this.$emit('handleRefresh')
    },
    handlePropertyAdd(data) {
      bindElevator(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import "@/styles/addtable.scss";
@import "@/styles/public.scss";

.bind-container {
  .el-icon-circle-check:before,
  .el-icon-circle-close:before {
    margin: 0  6px 0 -12px;
  }
  .bind-content {
    width: 800px;
    background: #ffffff;
    margin-left: -200px;
    .bind-main {
      .plBtn {
        padding-left: 30px;
      }
      .unBtn {
        padding-left: 28px;
      }
      .co-btn {
        margin-left: 20px;
      }
      .sele-btn {
        width: 136px;
      }
      .footer {
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
      }
    }
    .con {
      padding-left: 50px;
      margin-top: 30px;
      .con-row {
        padding: 6px 0px;
      }
      .inputLable .input {
        height: 36px;
      }
    }
    .inputLable input {
      width: 450px;
    }
    .inputLable .name {
      width: 220px !important;
      padding-right: 20px;
    }
  }
}
</style>
